<template>
  <!--登录模拟交易-->
  <div class="foot_div">
  	<div class="foot_in">
  		<div class="foot_in_right">

        <el-card class="box-card view align-center " shadow="always">
            <div slot="header" class="clearfix">
              <span>HI, 欢迎登录</span>
            </div>

            <div class="right_one">
              <div class="right_title">账号:</div>
              <el-input v-model="param.account" style="width:155px;height:22px;margin-left: 8px;border-radius: 3px;" />
            </div>
            <div class="right_one">
              <div class="right_title">模拟交易密码:</div>
              <el-input v-model="param.password" type="password" style="width:155px;height:22px;margin-left: 8px;border-radius: 3px;" />
            </div>
            <div class="right_one">
              <div class="right_title">验证码</div>
             
              <el-input v-model="aaa" @blur="checkNum" style="width:85px;height:22px;margin-left: 8px;border-radius: 3px;" type="text" />
              <div class="codediv" @click="createCode">{{ bbb }}</div>
            </div>

            <div class="right_one">
              <el-checkbox v-model="rePwd">记住密码</el-checkbox>
            </div>


            <div class="m-t-20">
              <el-button   class="width100" type="success" @click="btnclick&&unlock()">登录</el-button>
            </div>
            
        </el-card>

  		</div>
  	</div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
 export default {
   computed: mapState({
     userInfo: state => state.userInfo,/* 用户信息 */
   }),
   created: function() {
   	var that = this;
   	that.getuser();
   	that.createCode(); //初始化生成一个4位数的验证码
   	// that.getcicc();
   },
   data() {
     return {
       disbg: true,
       rePwd: true,
       btnclick:true,/* 按钮功能 */
       btnclick1:true,/* 按钮功能 */
       param: {
       	account: '' ,//账户
        password: '',
        group: 'pc'
       },
       aaa: '',
       bbb: '',
       ccc: '欢迎使用中远分析盛世行情分析系统',
     };
   },
   mounted() {
     let account =  localStorage.getItem('account');
     let password = localStorage.getItem('password');
      if (account != 'null' && account && password != 'null' && password) {
        this.param.account = account
        this.param.password = password
      }
   },
   beforeDestroy() {

   },
   methods:{
     /* 判断网络*/
     xuanyl(val) {

     	if (val == 1) {
     		this.disbg = true;
     	} else if (val == 2) {
     		this.disbg = false;
     	}
     },
     //账户信息
     getuser() {
       if (localStorage.getItem('_token') != 'null') {
         this.getUserInfo()
         
       } else {
         this.param.account = this.userInfo.account;
        if(!this.userInfo.account||this.userInfo.account==undefined){
            let account = localStorage.getItem('siteName');
            this.param.account = account;
        }
       }
       
     },
     /* 获取验证码*/
     createCode() {
     	var code = '';
     	var codeLength = 4; //验证码的长度
     	var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9); //随机数
     	for (var i = 0; i < codeLength; i++) {
     		//循环操作
     		var index = Math.floor(Math.random() * 10); //取得随机数的索引（0~35）
     		code += random[index]; //根据索引取得随机数加到code上
     	}
     	this.bbb = code; //把code值赋给验证码
     },
     /* 判断验证码正确*/
     checkNum() {
     	if (this.aaa == this.bbb) {
     		return (this.ccc = '验证码正确');
     	} else {
     		this.ccc = '验证码错误';
     		return this.createCode();
     	}
     },
     /* 解锁*/
     unlock() {
       this.btnclick=false;
     	var that = this;
     	if (that.password == '') {
        this.btnclick=true;
     		return (that.ccc = '请输入密码信息！');
     	} else if (that.aaa == '') {
        this.btnclick=true;
     		return (that.ccc = '请输入右边灰色图片中的四个数字！');
     	} else if (this.aaa !== this.bbb) {
        this.btnclick=true;
     		return (this.ccc = '验证码错误');
     	}
      //  
      this.$post('user/login', this.param).then(res => {
        this.btnclick=true;
        if (res.code == 1) {
          if (this.rePwd) {
            localStorage.setItem('account',this.param.account);
            localStorage.setItem('password',this.param.password);
          } else {
            localStorage.removeItem('account');
            localStorage.removeItem('password');
          }
          
          localStorage.removeItem('_token');
          localStorage.removeItem('siteName');
          this.$svcInvoke.setConf("_token", res.data.userinfo.token);
          localStorage.setItem('_token',res.data.userinfo.token);
          this.$store.commit('set',{bottomlist:'footnav'});
          localStorage.setItem('siteName',res.data.userinfo.username);
          this.getUserInfo()
          this.param.password = '';
        } else {
          this.$notify.error(res.message||'登录失败！');
        }
      });
      // console.log(this.$store.state)
     },
     getUserInfo() {
       this.$post('user/getUserinfo', {}).then(res => {
         this.$store.commit('set',{userInfo:res.data});
         this.$store.commit('set',{bottomlist:'footnav'});
      })
     },
     /* 退出登录 */
     tuichu() {
       this.btnclick1=false;
      this.$confirm('确认退出系统', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(({ value }) => {
          this.btnclick1=true;
          this.$store.commit('set', { bottomlist: 'footnav' });
          this.$store.commit('set', { navtopheight: 100 });
          this.$store.commit('set', {isinclass: 2});
          localStorage.removeItem('_token');
          this.$svcInvoke.setConf("_token", "");
          this.$router.push({
            path: '/'
          });
        })
        .catch(() => {
          this.btnclick1=true;
          this.$notify({
            type: 'info',
            message: '已取消退出'
          });
        });
     },
   }
 };
</script>

<style scoped="scoped">
  .box-card {
    width: 400px;
    height: 350px;
  }
  /* 提示弹窗*/
  .looding{
    position: fixed;
    top: 300px;
    left: 50%;
    border-radius: 5px;
    background: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 30px;
    font-weight: 600;
    padding: 10px;
  }
  /* 颜色设置 */

  .isbg {
  	background-color: #ffffff;
  }
  .bg1 {
  	background-color: #3399ff;
  	color: #ffffff;
  }
  .right_one {height: 45px;}
  .foot_div {
  	width: 100%;
  	height: 100%;
  	background-image: url(../assets/bgdddd.png);
    box-shadow: 0 0 15px rgb(0,0,0 ,.4);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover ;
  	display: flex;
  	flex-direction: column;
  	align-items: center;
  }

  .foot_in {
  	width: 500px;
  	height: 190px;
  	margin: 20px auto;
  	display: flex;
  	justify-content: space-between;
  }
  .foor_bot{
  	width: 500px;
  	height: 20px;
  	margin: 0px auto;
  	text-align: left;
  	color:#0000FF;
  }

  .foot_in_left {
  	width: 40%;
  	height: 160px;
  	padding: 10px;
  	box-sizing: border-box;
  }

  .footle {
  	width: 100%;
  	text-align: left;
  }

  .footle_d {
  	margin-top: 6px;
  	width: 160px;
  	height: 95px;
  	border: #828790 solid 1px;
    cursor: default;
  }

  .foot_in_right{
  	width: 60%;
  	height: 180px;
  	box-sizing: border-box;
  	padding: 10px 0;
  }

  .foot_in_right_title{
    width:100%;
  }

  .right_one {
  	width: 100%;
  	display: flex;
  	justify-content: flex-start;
  	align-items: center;
  	margin-top: 5px;
  }

  .right_title{
  	width: 90px;
  }

  .right_two {
  	width: 100%;
  	display: flex;
  	justify-content: flex-start;
  	align-items: center;
  	margin-top: 15px;
  	box-sizing: border-box;
  	padding-left: 20px;
  }

  .bott_on {
  	margin-right: 10px;
  	width: 80px;
  	height: 22px;
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	border-radius: 5px;
  	border: #707070 solid 1px;
  }
  .codediv {
    cursor: pointer;
  	width: 85px;
  	height: 25px;
  	margin-left: 8px;
  	background-color: #c8c8c8;
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	color: #00bfff;
  	font-weight: 600;
  }
</style>
